<template>
    <div>
        <!-- 显示分类列表 -->
        <div 
            class="class-list"
            v-for="item in classList"
            :key="item.id">
            <div class="place-ccc"></div>
            <mynav :fSize="16">
                <div><span class="icon"></span>{{item.title}}</div>
                <div @click="gotoRecom"><i class="fa fa-wpexplorer" aria-hidden="true"></i> 查看全部</div>
            </mynav>
            <ul>
                <li 
                    v-for="word in item.content"
                    :key = "word">
                    <span @click="gotoRecom">{{word}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import mynav from "@/components/mynav.vue"
export default {
    name: 'myClass',
    components: {
        mynav,
    },
    data() {
        return {
            classList: [],
        }
    },
    methods: {
        gotoRecom() {
            this.$router.push({path:'/recommend'});
        }
    },
    beforeMount() {
        // 请求列表数据
        this.$axios.get('./static/myClass.json').then(response => {
            this.classList = response.data;
            this.classList.forEach((item)=> {
                item.id = Symbol();
            })
        }, response => {
            console.log("error");
            alert('网络请求错误')
        });
    }
}
</script>


<style lang="scss" scoped>
.class-list {
    overflow: hidden;
    .place-ccc {
        height: 14px;
        border-bottom: 1px solid #ccc;;
        background-color: #f2f2f2;
    }
    .icon {
        width: 12px;
        height: 16px;
        margin-right: 16px;
        background-color: #E95E56;
        border-radius: 5px;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        li {
            color: #333;
            font-size: 14px;
            width: 25%;
            box-sizing: border-box;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            margin-bottom: -1px;
            position: relative;
            &::after {
                content: "";
                display: block;
                position: absolute;
                height: 16px;
                width: 1px;
                background-color: #ccc;
                top:50%;
                margin-top: -8px;
                right: -1px;
            }
        }
    }
}
</style>